<template>
    <div class="cartIndex">

        <div class="cartTop">
            <van-nav-bar title="购物车" />

            <!-- banner -->
            <div class="banner">
                <img src="/img/cartBanner.png" alt="">
            </div>

            <!-- 购物车列表 -->
            <van-swipe-cell v-if="cartList.length" v-for="item in cartList" :key="item.id">
                <div class="configGoods">
                    <van-checkbox v-model="item.flag" checked-color="#88afd5"
                        @click="handelSelectOne(item.proId, item.flag)" />
                    <div class="left">
                        {{ item.goods }}
                        <p>{{ configArr }} <br> 仅限打包带走</p>
                    </div>
                    <span class="price">￥{{ item.goods_price }}</span>
                    <van-stepper v-model="item.goods_num" theme="round" button-size="22" disable-input
                        @click="changeGoodsNum(item.proId, item.goods_num)" />
                </div>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="delGoods(item.proId)" />
                </template>
            </van-swipe-cell>
            <!-- 如果购物车列表为空 -->
            <p v-else class="noGoods">
                购物车暂无商品
                <router-link to="/goodsList">去选购</router-link>
            </p>

            <!-- 猜你喜欢 -->
            <div class="guessLike">
                <div class="likeTop">
                    猜你喜欢
                    <span><van-icon name="replay" /> 换一批</span>
                </div>
                <div class="likeList">
                    <div class="likeBox" v-for="item in 3">
                        <img src="/img/cartLike.png" alt="">
                        <h4 class="tittle">金枪鱼谷物沙拉</h4>
                        <p class="dec">tuna and mixed sa..</p>
                        <div class="price">
                            ￥25.08 <span>￥38</span>
                            <van-button icon="plus" type="primary" size="mini" round class="addCartBtn" color="#88afd5"
                                @click="addCart" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cartBottm">
            <!-- 提交 -->
            <div class="tabbar">
                <p class="sum">应付合计 <span class="sumPrice">￥{{ totolPrice }}</span></p>
                <van-button type="primary" color="#90c0ef" square @click="toPay">去结算</van-button>
            </div>
            <Footer></Footer>
            <!-- <van-tabbar v-model="active">
                <van-tabbar-item icon="home-o">标签</van-tabbar-item>
                <van-tabbar-item icon="search">标签</van-tabbar-item>
                <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
                <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
            </van-tabbar> -->
        </div>


    </div>

</template>

<script setup>
import { ref, onMounted, computed} from 'vue';
import { useRoute,useRouter } from 'vue-router'
import { showToast } from 'vant';
import { getCartList, delCart, changeCartNum, changeCartFlag,delCartList } from '@/api/api'
import { usePayStore } from '@/store/goPay'

// 引入底部组件
import Footer from '../../components/home/footer/Footer.vue'

//底部Tabber
const active = ref(0);

const router = useRouter()
const route = useRoute()
// 由商品详情页传过来的商品配置参数
const configArr = route.query.configArr

// 定义变量接收pinia里的数据
const payStore = usePayStore()

// const checked = ref(true);
// const onSubmit = () => showToast('点击按钮');

// 购物车列表
const cartList = ref([])
// 获取购物车

// 封装一个获取购物车初始化函数
const initCartList = async () => {
    try {
        let { data } = await getCartList({ id: 11 })
        // console.log(data);
        cartList.value = data
    } catch (error) {
        console.error(error)
    }
}
// 打开页面即渲染
onMounted(() => initCartList())


// 点击单选修改状态
const handelSelectOne = async (proId, flag) => {
    try {
        // let res = await axios.put(``, { flag, goodsNum })
        flag ? flag = 1 : flag = 0;
        let res = await changeCartFlag({ proId, flag, uId: 11 })
        // console.log(res);
    } catch (error) {
        console.error(error)
    }
}

//点击步进器修改商品数量
const changeGoodsNum = async (proId, goods_num) => {
    try {
        // let res = await axios.put(``, { selected, count })
        let res = await changeCartNum({ proId, goods_num, uId: 11 })
        // console.log(res);
    } catch (error) {
        console.error(error)
    }
}

//价格合计总数
const totolPrice = computed(() => {
    return cartList.value?.filter(item => item.flag).reduce((prev, item) => {
        return prev + item.goods_price * item.goods_num
    }, 0)
})

// 删除一条购物车商品  需要调用initCartList()
const delGoods = async (proId) => {
    let { mes, status } = await delCart({ uId: 11, proId })
    // console.log(res);
    if (status === 200) {
        showToast(mes);
    } else {
        showToast('删除失败，请重试');
    }

    initCartList()

}
// 加入购物车  抽到hooks组件复用
const addCart = () => { console.log('加入购物车按钮，传递的参数为：'); }

// --------点击去结算--------
// 定义一个数组存放购物车中选中的需要去结算的商品
const payGoodsList = ref([])
const toPay = async () => {
    let { data } = await getCartList({ id: 11 })
    // console.log(data);
    payGoodsList.value = data.filter(item => item.flag)
    // console.log(payGoodsList.value);
    //判断是否有选中商品
    if(payGoodsList.value.length === 0) return showToast('请选择需要结算的商品')

    let { editPayList } = payStore
    editPayList(payGoodsList.value)
    await delCartList({uId:11})
    initCartList()

    // let { orderData } = toRefs(payStore)
    // console.log(orderData.value);
    router.push('/providehome')
}





</script>

<style lang="scss" scoped>
.cartIndex {
    width: 100%;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;

    .cartTop {

        .banner {
            img {
                width: 375px;
                height: 68px;
            }
        }

        .configGoods {
            width: 375px;
            height: 80px;
            box-sizing: border-box;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            color: rgba(80, 80, 80, 1);
            // border-top: 1px solid #f2f2f2;
            // border-bottom: 1px solid #f2f2f2;
            background-color: #fff;


            .left {
                position: absolute;
                left: 60px;
                font-size: 15px;
                font-weight: bold;

                p {
                    font-size: 10px;
                    line-height: 150%;
                }

            }

            .price {
                position: absolute;
                right: 110px;
                color: #383838;
                font-size: 18px;
                font-weight: bold;
            }
        }

        .delete-button {
            height: 100%;
        }

        .noGoods {
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        .guessLike {
            width: 345px;
            height: 212px;
            margin: 10px 15px 120px;
            // background-color: pink;

            .likeTop {
                font-size: 15px;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                padding: 6px 0;

                span {
                    font-size: 11px;
                    color: #90c0ef;
                }
            }

            .likeList {
                width: 345px;
                display: flex;
                justify-content: space-between;

                .likeBox {
                    width: 108px;
                    height: 180px;
                    background-color: #fff;

                    img {
                        width: 108px;
                        height: 108px;
                    }

                    .tittle {
                        font-size: 11px;
                        color: rgba(56, 56, 56, 1);
                        line-height: 150%;
                        font-weight: bold;
                    }

                    .dec {
                        width: 108px;
                        font-size: 10px;
                        line-height: 150%;
                        color: #a6a6a6;
                        overflow: hidden;
                    }

                    .price {
                        position: relative;
                        font-size: 12px;
                        color: #ff8d1a;
                        margin-top: 8px;

                        span {
                            color: #a6a6a6;
                            text-decoration: line-through;
                        }

                        .van-button {
                            position: absolute;
                            left: 82px;
                            bottom: -1px;
                            width: 18px;
                            height: 18px;
                        }
                    }
                }
            }
        }
    }

    .cartBottm {

        .tabbar {
            position: fixed;
            bottom: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            width: 375px;
            height: 60px;
            background-color: #fff;
            padding-left: 20px;

            .sum {
                font-size: 14px;

                .sumPrice {
                    font-size: 24px;
                    font-weight: bold;
                }
            }

            .van-button {
                width: 119px;
                height: 60px;
                font-size: 16px;
            }


        }
    }


}
</style>